<template>
  <div class="min-h-screen bg-gradient-to-br from-green-900 via-teal-900 to-blue-900 flex items-center justify-center p-4">
    <div class="max-w-4xl mx-auto">
      <!-- 主标题卡片 -->
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 mb-8 text-center">
        <h1 class="text-4xl font-bold text-white mb-6">关于这个项目</h1>
        <p class="text-slate-300 mb-6 leading-relaxed text-lg">
          这是一个使用 <span class="text-green-400 font-semibold">Vue 3</span> + 
          <span class="text-blue-400 font-semibold">Tailwind CSS 4.1</span> + 
          <span class="text-purple-400 font-semibold">Vite</span> 构建的现代化前端应用示例。
        </p>
        
        <!-- 技术栈展示 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div 
            v-for="tech in techStack" 
            :key="tech.name"
            class="bg-white/5 p-6 rounded-lg transition-all duration-300 hover:bg-white/10 hover:scale-105"
          >
            <div class="text-4xl mb-3">{{ tech.icon }}</div>
            <h3 class="text-lg font-semibold text-white mb-2">{{ tech.name }}</h3>
            <p class="text-slate-300 text-sm mb-3">{{ tech.description }}</p>
            <span class="text-xs px-2 py-1 bg-white/10 rounded-full text-slate-300">
              {{ tech.version }}
            </span>
          </div>
        </div>
      </div>

      <!-- 功能特性 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <!-- Vue 3 特性 -->
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
          <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
            <span class="mr-3">🚀</span>
            Vue 3 特性
          </h2>
          <ul class="space-y-3">
            <li 
              v-for="feature in vueFeatures" 
              :key="feature"
              class="flex items-start text-slate-300"
            >
              <span class="text-green-400 mr-2 mt-1">✓</span>
              {{ feature }}
            </li>
          </ul>
        </div>

        <!-- Tailwind CSS 特性 -->
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
          <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
            <span class="mr-3">🎨</span>
            Tailwind CSS 4.1 特性
          </h2>
          <ul class="space-y-3">
            <li 
              v-for="feature in tailwindFeatures" 
              :key="feature"
              class="flex items-start text-slate-300"
            >
              <span class="text-blue-400 mr-2 mt-1">✓</span>
              {{ feature }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 项目统计 -->
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 mb-8">
        <h2 class="text-2xl font-bold text-white mb-6 text-center">项目统计</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div 
            v-for="stat in projectStats" 
            :key="stat.label"
            class="text-center"
          >
            <div class="text-3xl font-bold text-white mb-2">{{ stat.value }}</div>
            <div class="text-slate-300 text-sm">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- 开发者信息 -->
      <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 text-center">
        <h2 class="text-2xl font-bold text-white mb-4">开发者信息</h2>
        <div class="flex justify-center items-center space-x-6 mb-4">
          <div class="text-slate-300">
            <span class="text-blue-400">开发者:</span> {{ developer.name }}
          </div>
          <div class="text-slate-300">
            <span class="text-green-400">邮箱:</span> {{ developer.email }}
          </div>
        </div>
        
        <!-- 社交链接 -->
        <div class="flex justify-center space-x-4">
          <a 
            v-for="link in socialLinks" 
            :key="link.name"
            :href="link.url" 
            target="_blank"
            class="bg-white/5 hover:bg-white/10 text-white px-4 py-2 rounded-lg 
                   transition-all duration-300 flex items-center space-x-2"
          >
            <span>{{ link.icon }}</span>
            <span>{{ link.name }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 技术栈信息
const techStack = [
  {
    name: 'Vue 3',
    icon: '💚',
    description: '渐进式 JavaScript 框架',
    version: 'v3.5+'
  },
  {
    name: 'Tailwind CSS',
    icon: '🎨',
    description: '实用优先的 CSS 框架',
    version: 'v4.1+'
  },
  {
    name: 'Vite',
    icon: '⚡',
    description: '下一代前端构建工具',
    version: 'v7.0+'
  }
]

// Vue 3 特性
const vueFeatures = [
  '组合式 API (Composition API)',
  'TypeScript 原生支持',
  '更好的性能和更小的包体积',
  '响应式系统重构',
  '多根节点组件',
  'Teleport 传送门',
  'Suspense 异步组件'
]

// Tailwind CSS 特性
const tailwindFeatures = [
  '新的导入语法 @import "tailwindcss"',
  '原生 CSS 变量支持',
  '改进的性能和构建速度',
  '更好的 IDE 支持',
  '玻璃态效果 backdrop-blur',
  '透明度语法 bg-white/10',
  '现代渐变和动画'
]

// 项目统计
const projectStats = [
  { label: '组件数量', value: '3+' },
  { label: '页面数量', value: '3' },
  { label: '代码行数', value: '500+' },
  { label: '开发时间', value: '2h' }
]

// 开发者信息
const developer = {
  name: 'gthank',
  email: 'gthank@163.com'
}

// 社交链接
const socialLinks = [
  { name: 'GitHub', icon: '🔗', url: 'https://github.com' },
  { name: 'Vue.js', icon: '💚', url: 'https://vuejs.org' },
  { name: 'Tailwind', icon: '🎨', url: 'https://tailwindcss.com' }
]
</script>

<style scoped>
/* 组件特定样式 */
</style>
